<!DOCTYPE html>
<html>
<head>
	<!-- 对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。-->
<meta charset="utf-8">
<title>这是HTML基础只是的第一个demo</title>
<!-- 网页定义描述内容 -->
<meta name="description" content="刘子彬demo">
<!-- 为搜索引擎定义关键词 -->
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<!-- 网页作者 -->
<meta name="author" content="刘子彬">

<!-- 全局设置样式 -->
<style type="text/css">
	body {background-color: yellow}
	p {color: red}
</style>


</head>
<body>
    <h1 id = "one">我的第一个标题</h1>
    <p>我的第一个段落。</p>
    <a href="https://www.baidu.com">百度一下</a>

    <br>
    <img src="../Resource/base_test_love.png" width="100" height="100" >


    <div id = "div_title">
    	<h4>这是一个div</h4>
    </div>

    <p>这是一个水平线</p>
    <hr>

	<p>这是<br>一个<br>分段的段落</p>
	<b>这是文字的粗体</b>
	<i>这是文字的斜体</i>
	<big>这是放大文字</big>
	 这是文字的<sup>上标</sup>
	这是文字的<sub>下标</sub>

	<p>这是一个引用的标签开始引用<q>引用的内容</q></p>


	<p>创建一个点击图片的链接<a href="https://www.baidu.com"><img src="../Resource/base_test_love.png" width="50" height="50""></a></p>


	<a href="#one">点击跳转到制定的段落</a>
	<h4>这是一个段落</h4>
	<h4>这是一个段落</h4>
	<h4>这是一个段落</h4>
	<h4 id = "duanluo">这是一个段落</h4>
	<h4>这是一个段落</h4>

	<a href="https://www.baidu.com" style="text-decoration: none">没有下划线的标签</a>

	<p style="font-family:arial;color: red;font-size:40px;text-align: center;">这是一个具有样式的段落</p>

	<img src="http://image.baidu.com/search/detailidlsimipic?tn=detailidlsimipic&dututype=similar&word=&pn=1&queryurl=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F11385343fbf2b2111aa1611fc08065380dd78ed0.jpg&querysign=1526275225%2C902319352&objwidth=420&objheight=600&objurl=http%3A%2F%2Fpic11.huitu.com%2Fres%2F20130816%2F679_20130816000144460200_1.jpg&fromurl=http%3A%2F%2Fwww.huitu.com%2Fphoto%2Fshow%2F20130816%2F000144460200.html%3Ffrom%3Dnipic&querytype=0" alt="inset_image" width="200" height="150">

	<!-- 创建表格 -->
	<h4>一行三列</h4>
	<table border=1px style="color: red;">
		<tr>
			<td>100</td>
			<td>100</td>
			<td>100</td>
		</tr>
	</table>

	<h4>三行三列</h4>
	<table bgcolor="green" border='1'>
		  <caption>这是一个标题</caption>
		<tr>
			<td>第一列header</td>
			<td>第二列header</td>
			<td>第三列header</td>
		</tr>
		<tr>
			<td>30</td>
			<td>30</td>
			<td>40</td>
		</tr>
		<tr>
			<td>30</td>
			<td>30</td>
			<td>40</td>
		</tr>

	</table>

	<!-- 列表 -->
	<ol start="10">
		<li>列表第一行</li>
		<li>列表第二行</li>
		<li>列表第三行</li>
	</ol>

	<ul>
		<li>coffee</li>
		<li>tea</li>
		<li>Milk</li>
	</ul>

	<dl>
		<dt>Coffet</dt>
		<dd>black</dd>
		<dt>Tea</dt>
		<dd>white</dd>
	</dl>

	<!-- HTML <div> 和<span> -->

   <h2 style="color:red">特别注意</h2>
	<h4>块级元素h1、p、ul、table div 通常会新的一行来显示</h4>
	<h4>内联元素在显示时通常不会以新行开始b、td、a、img span</h4>




</body>
</html>